<template>
  <div class="box">
    <div class="wrap">
      <h3>LOGIN</h3>
      <form @click.prevent="">
        <input
          v-model="formData.username"
          type="text"
          name=""
          id=""
          placeholder="用户名"
          required
        />
        <input
          v-model="formData.password"
          type="text"
          name=""
          id=""
          placeholder="密码"
          required
        />
        <button @click="onSubmit()">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        password: "",
      }
    };
  },
  methods: {
    onSubmit() {
      if (!this.formData.username) {
        return alert("用户名不为空");
      }
      if (!this.formData.password) {
        return alert("密码不为空");
      }

      localStorage.setItem("isLogin", "1");
      this.$router.push({ path: "/home" }).catch(() => {});
    },
  },
};
</script>


<style scoped>
.box {
  height: 80vh;
}
.wrap {
  position: fixed;
  width: 690px;
  height: 400px;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 4px 0 #ccc;
  transform: translate(-50%, -50%);
  background: rgb(51, 51, 51);
  border-radius: 2%;
  padding-top: 60px;
}

.wrap h3 {
  font-size: 40px;
  padding: 30px 0;
  color: #fff;
  text-align: center;
}

.wrap form {
  display: flex;
  flex-direction: column;
  width: 60%;
  margin: 0 auto;
}

.wrap form input {
  height: 40px;
  border-radius: 10px;
  outline: none;
  border: none;
  margin: 10px 0;
}

.wrap form button {
  width: 20%;
  height: 40px;
  font-size: 16px;
  margin: 0 auto;
  border-radius: 6px;
  outline: none;
  border: none;
  cursor: pointer;
}
</style>
